<template>
  <div class="search-page">
    <!-- 搜索头部 -->
    <div class="search-header">
      <div class="search-info">
        <h2>搜索结果</h2>
        <p v-if="keyword">关键词: <span class="keyword">{{ keyword }}</span></p>
        <p v-if="!loading && searchResults.length > 0" class="result-count">
          找到 {{ total }} 个相关结果
        </p>
      </div>
    </div>

    <!-- 搜索结果 -->
    <div class="search-content">
      <!-- 加载状态 -->
      <div v-if="loading" class="loading-container">
        <el-skeleton :rows="3" animated />
      </div>

      <!-- 搜索结果列表 -->
      <div v-else-if="searchResults.length > 0" class="search-results">
        <SearchResultCard
          v-for="item in searchResults"
          :key="`${item.type}-${item.id}`"
          :data="item"
          :highlight-keyword="keyword"
        />

        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :total="total"
            :page-sizes="[10, 20, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>

      <!-- 无结果 -->
      <div v-else class="no-results">
        <el-icon size="64" color="#8590a6"><Search /></el-icon>
        <h3>没有找到相关内容</h3>
        <p>试试其他关键词或检查拼写</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref, watch} from 'vue'
import {useRoute} from 'vue-router'
import {ElMessage} from 'element-plus'
import SearchResultCard from './components/SearchResultCard.vue'
import {searchContent} from '@/api/home'

const route = useRoute()

// 响应式数据
const loading = ref(false)
const keyword = ref('')
const searchResults = ref([])
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)

// 执行搜索
const performSearch = async () => {
  if (!keyword.value?.trim()) return

  loading.value = true
  try {
    console.log('发起搜索请求:', {
      keyword: keyword.value.trim(),
      pageNum: currentPage.value,
      pageSize: pageSize.value
    })

    const response = await searchContent({
      keyword: keyword.value.trim(),
      pageNum: currentPage.value,
      pageSize: pageSize.value
    })

    console.log('搜索响应:', response)

    if (response.code === 200) {
      searchResults.value = response.data?.data || []
      total.value = response.data?.total || 0
    } else {
      ElMessage.error(response.message || '搜索失败')
      searchResults.value = []
      total.value = 0
    }
  } catch (error) {
    console.error('搜索失败:', error)
    ElMessage.error('搜索失败，请稍后重试')
    searchResults.value = []
    total.value = 0
  } finally {
    loading.value = false
  }
}

// 监听路由变化
watch(() => route.query.q, (newKeyword) => {
  if (newKeyword) {
    keyword.value = newKeyword
    currentPage.value = 1
    performSearch()
  }
}, { immediate: true })

// 分页处理
const handleSizeChange = (newSize) => {
  pageSize.value = newSize
  currentPage.value = 1
  performSearch()
}

const handleCurrentChange = (newPage) => {
  currentPage.value = newPage
  performSearch()
}

// 搜索结果点击跳转由SearchResultCard组件内部处理

// 初始化
onMounted(() => {
  if (route.query.q) {
    keyword.value = route.query.q
    performSearch()
  }
})
</script>

<style lang="scss" scoped>
.search-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 24px;
}

.search-header {
  margin-bottom: 32px;

  .search-info {
    h2 {
      font-size: 24px;
      font-weight: 600;
      color: $text-color;
      margin-bottom: 8px;
    }

    p {
      color: $text-secondary;
      margin-bottom: 4px;

      .keyword {
        color: $primary-color;
        font-weight: 500;
      }
    }

    .result-count {
      font-size: 14px;
      color: $text-tertiary;
    }
  }
}

.search-content {
  .loading-container {
    padding: 40px 0;
  }

  .search-results {
    .pagination-container {
      display: flex;
      justify-content: center;
      margin-top: 40px;
      padding: 20px 0;
    }
  }

  .no-results {
    text-align: center;
    padding: 80px 40px;
    background: $background-color;
    border-radius: $border-radius-large;
    box-shadow: $shadow-light;

    h3 {
      margin: 16px 0 8px;
      color: $text-color;
      font-weight: 500;
    }

    p {
      color: $text-secondary;
    }
  }
}
</style>
